<!DOCTYPE html>
<html>
<head>
    <title>iviewDemo</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak>
    <div id="body">
        <i-button type="info" @click="api">IVIEW_API</i-button>
        <i-switch v-model="switch1" @on-change="change"></i-switch>
        <Row>
            <i-col span="12">
                <Date-picker type="date" v-model="data1" placeholder="选择日期" style="width: 200px"></Date-picker>
                {{data1}}
            </i-col>
            <i-col span="12">
                <Date-picker type="daterange" placement="bottom-end" placeholder="选择日期区间"
                             style="width: 200px"></Date-picker>
            </i-col>
        </Row>
        <Tabs value="name1">
            <Tab-pane label="buttons" name="name0">
                <i-col span="24">
                    <i-button>Default</i-button>
                    <i-button type="primary">Primary</i-button>
                    <i-button type="ghost">Ghost</i-button>
                    <i-button type="dashed">Dashed</i-button>
                    <i-button type="text">Text</i-button>
                    <i-button type="info">信息按钮</i-button>
                    <i-button type="success">成功按钮</i-button>
                    <i-button type="warning">警告按钮</i-button>
                    <i-button type="error">错误按钮</i-button>
                </i-col>
                <i-col span="24">
                    <i-button type="primary" shape="circle" size="large">Large</i-button>
                    <i-button type="primary" shape="circle">Default</i-button>
                    <i-button type="primary" shape="circle" size="small">Small</i-button>
                    <i-button type="ghost" icon="social-facebook"></i-button>
                    <i-button type="ghost" icon="social-twitter"></i-button>
                    <i-button type="success" @click="show">Click me!</i-button>
                    <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
                </i-col>
                </i-col>
                <i-col span="24">
                    <i-button type="success" shape="circle" icon="ios-search"></i-button>
                    <i-button type="success" icon="ios-search">搜索</i-button>
                    <i-button type="success" shape="circle" icon="ios-search">搜索</i-button>
                    <i-button type="success" shape="circle">圆角按钮</i-button>
                    <i-button type="ghost" shape="circle" icon="ios-search"></i-button>
                    <i-button type="ghost" icon="ios-search">搜索</i-button>
                    <i-button type="ghost" shape="circle" icon="ios-search">搜索</i-button>
                    <i-button type="ghost" shape="circle">圆角按钮</i-button>
                    <i-button type="primary">Primary</i-button>
                    <i-button type="primary" disabled>Primary(Disabled)</i-button>
                </i-col>
                <i-col span="24">
                    <i-button type="primary" loading>Loading...</i-button>
                    <i-button type="primary" :loading="loading" @click="toLoading">
                        <span v-if="!loading">Click me!</span>
                        <span v-else>Loading...</span>
                    </i-button>
                    <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
                        <span v-if="!loading2">Click me!</span>
                        <span v-else>Loading...</span>
                    </i-button>
                </i-col>
                <i-col span="6">
                    <i-button type="success" long>确认提交</i-button>
                </i-col>
                <i-col span="6">
                    <i-button type="error" long>确认删除</i-button>
                </i-col>
            </Tab-pane>
            <Tab-pane label="form表单" name="name1">
                <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <Form-item label="姓名" prop="name">
                        <i-input v-model="formValidate.name" placeholder="请输入姓名"/>
                    </Form-item>
                    <Form-item label="邮箱" prop="mail">
                        <i-input v-model="formValidate.mail" placeholder="请输入邮箱"/>
                    </Form-item>
                    <Form-item label="城市" prop="city">
                        <i-select v-model="formValidate.city" placeholder="请选择所在地">
                            <i-option value="beijing">北京市</i-option>
                            <i-option value="shanghai">上海市</i-option>
                            <i-option value="shenzhen">深圳市</i-option>
                        </i-select>
                    </Form-item>
                    <Form-item label="选择日期">
                        <Row>
                            <i-col span="5">
                                <Form-item prop="date">
                                    <Date-picker type="date" placeholder="选择日期"
                                                 v-model="formValidate.date"></Date-picker>
                                </Form-item>
                            </i-col>
                            <i-col span="1" style="text-align: center">-</i-col>
                            <i-col span="5">
                                <Form-item prop="time">
                                    <Time-picker type="time" placeholder="选择时间"
                                                 v-model="formValidate.time"></Time-picker>
                                </Form-item>
                            </i-col>
                        </Row>
                    </Form-item>
                    <Form-item label="性别" prop="gender">
                        <Radio-group v-model="formValidate.gender">
                            <Radio label="male">男</Radio>
                            <Radio label="female">女</Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item label="爱好" prop="interest">
                        <Checkbox-group v-model="formValidate.interest">
                            <Checkbox label="吃饭"></Checkbox>
                            <Checkbox label="睡觉"></Checkbox>
                            <Checkbox label="跑步"></Checkbox>
                            <Checkbox label="看电影"></Checkbox>
                        </Checkbox-group>
                    </Form-item>
                    <Form-item label="介绍" prop="desc">
                        <i-input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                                 placeholder="请输入..."/>
                    </Form-item>
                    <Form-item>
                        <i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
                        <i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置
                        </i-button>
                    </Form-item>
                </i-form>
            </Tab-pane>
            <Tab-pane label="时间轴" name="name2">
                <Timeline>
                    <Timeline-item>
                        <p class="time">1976年</p>
                        <p class="content">Apple I 问世</p>
                    </Timeline-item>
                    <Timeline-item>
                        <p class="time">1984年</p>
                        <p class="content">发布 Macintosh</p>
                    </Timeline-item>
                    <Timeline-item>
                        <p class="time">2007年</p>
                        <p class="content">发布 iPhone</p>
                    </Timeline-item>
                    <Timeline-item>
                        <p class="time">2010年</p>
                        <p class="content">发布 iPad</p>
                    </Timeline-item>
                    <Timeline-item>
                        <p class="time">2011年10月5日</p>
                        <p class="content">史蒂夫·乔布斯去世</p>
                    </Timeline-item>
                </Timeline>
            </Tab-pane>
            <Tab-pane label="slider" name="name3">
                <Slider v-model="value1"></Slider>
                <Slider v-model="value2" range></Slider>
                <Slider v-model="value3" range disabled></Slider>
                <Slider v-model="value4" :step="10"></Slider>
                <Slider v-model="value5" :step="10" range></Slider>
                <Slider v-model="value6" :step="10" show-stops></Slider>
                <Slider v-model="value7" :step="10" show-stops range></Slider>
                <Slider v-model="value8" show-input></Slider>
                <Slider v-model="value9" :tip-format="format"></Slider>
                <Slider v-model="value10" :tip-format="hideFormat"></Slider>
            </Tab-pane>
            <Tab-pane label="Circle 进度环" name="name4">
                <i-circle
                        :size="250"
                        :trail-width="4"
                        :stroke-width="5"
                        :percent="75"
                        stroke-linecap="square"
                        stroke-color="#43a3fb">
                    <div class="demo-i-circle-custom">
                        <h1>42,001,776</h1>
                        <p>消费人群规模</p>
                        <span>
                            总占人数
                            <i>75%</i>
                        </span>
                    </div>
                </i-circle>
            </Tab-pane>
            <Tab-pane label="级联选择" name="name5">
                <Cascader :data="data" v-model="value11"></Cascader>
            </Tab-pane>
            <Tab-pane label="Select" name="name6">
                <i-select v-model="model2" size="small" style="width:100px">
                    <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
                <i-select v-model="model3" style="width:100px">
                    <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
                <i-select v-model="model4" size="large" style="width:100px">
                    <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
            </Tab-pane>
        </Tabs>
    </div>
</div>

<script src="${rc.contextPath}/js/test/iviewDemo.js?_${date.systemTime}"></script>
</body>
</html>